<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <!--coolie-->
    <link href="public/admin/js/zui/css/zui.css" rel="stylesheet" type="text/css" />
    <link href="public/admin/css/admin.css" rel="stylesheet" type="text/css" />
    <script src="public/admin/js/jquery.1.10.2.js" type="text/javascript"></script>
    <script src="public/admin/js/zui/js/zui.js" type="text/javascript"></script>
    <!--coolie-->
    <title>管理后台首页</title>
</head>

<body style="padding: 30px;">
    <!--
	table-striped	 隔行换色
	table-hover 	响应鼠标悬停 
	table-bordered  加入四周边框
	table-borderless 取消所有边框
	table-auto		自动宽度
	table-condensed  经凑型
 -->
 	<h3>普通表格</h3>
    <table class="table table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>table-striped</td>
                <td>隔行换色</td>
                <td>catouse</td>
            </tr>
            <tr>
                <td>4</td>
                <td>table-hover</td>
                <td>响应鼠标悬停</td>
                <td>catouse</td>
            </tr>
            <tr>
                <td>2</td>
                <td>table-bordered</td>
                <td>加入四周边框</td>
                <td>zenUI</td>
            </tr>
            <tr>
                <td>3</td>
                <td>table-borderless</td>
                <td>取消所有边框</td>
                <td>catouse</td>
            </tr>
            <tr>
                <td>2</td>
                <td>table-auto</td>
                <td>自动宽度</td>
                <td>zenUI</td>
            </tr>
            <tr>
                <td>3</td>
                <td>table-condensed</td>
                <td>经凑型 Gaga</td>
                <td>catouse</td>
            </tr>
        </tbody>
    </table>

    <h3>表格颜色</h3>
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>描述</th>
                <th>Payment Taken</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="success">
                <td>1</td>
                <td>表示成功或积极的行为。</td>
                <td>01/04/2012</td>
                <td>Approved</td>
            </tr>
            <tr class="danger">
                <td>2</td>
                <td>表示一个危险或存有潜在危险的行为。</td>
                <td>02/04/2012</td>
                <td>Declined</td>
            </tr>
            <tr class="warning">
                <td>3</td>
                <td>表示警告，可能需要注意。</td>
                <td>03/04/2012</td>
                <td>Pending</td>
            </tr>
            <tr class="active">
                <td>4</td>
                <td>标记为激活行。</td>
                <td>04/04/2012</td>
                <td>Call in to confirm</td>
            </tr>
        </tbody>
    </table>

    <ul class="pager">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="###" data-toggle="pager" data-placement="top" data-url="?page=%">Pager</a></li>
        <li><a href="#">6</a></li>
        <li class="active"><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
        <li><a href="#">12</a></li>
        <li class="next"><a href="#">下一页 »</a></li>
    </ul>
</body>

</html>
<script src="/public/admin/coolie.js" data-main="js/main.js" data-config="~/public/admin/coolie-config.js"></script>